<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>网易云音乐</title>
		<link rel="shortcut icon" href="../netease_imgs/logo_16x16.ico"/>
		<link rel="stylesheet" type="text/css" href="../css/netease-music-header.css" />
		<link rel="stylesheet" type="text/css" href="../css/netease-music-content.css"/>
		<link rel="stylesheet" type="text/css" href="../css/netease-music-bottom.css"/>
		<style>
			body {
				font-family: Arial, Helvetica, sans-serif;
				margin: 0px;
				padding: 0px;
			}
		</style>
		<script src="../js/jquery-1.8.3.min.js"></script>
		<script>
			$(function(){
				var index = 0;
				var len = $("#animation .take-turns").length;
				var marginLeft = $("#animation .img-wrap li:eq(0)").css("marginLeft");
				setInterval(function(){
					index++;
					if (index >= len) index = 0;
					for (var i = 0; i < len; i++) {
						$("#animation .img-wrap li").eq(i).css("marginLeft", (- (index - i) * 730) + "px");
					}
				}, 3000);
			})
		</script>
	</head>
	<body>
		<div id="header">
			<div id="header-top">
				<img id="top-logo-icon" src="../netease_imgs/logo_32x32.ico" />
				<a id="logo-text" href="#">网易云音乐</a>
				<a class="top-line" href="#">发现音乐</a>
				<a class="top-line" href="#">我的音乐</a>
				<a class="top-line" href="#">朋友</a>
				<a class="top-line" href="#">商城</a>
				<a class="top-line" href="#">音乐人</a>
				<a class="top-line" href="#">下载客户端</a>
				<span>HOT</span>
				<input id="search" type="text" name="search" placeholder="音乐/视频/电台/用户" />
				<a id="producer-center" href="#">创作者中心</a>
				<a id="login" href="#">登录</a>
			</div>
			<div id="header-bottom">
				<a class="bottom-line">推荐</a>
				<a class="bottom-line">排行榜</a>
				<a class="bottom-line">歌单</a>
				<a class="bottom-line">主播电台</a>
				<a class="bottom-line">歌手</a>
				<a class="bottom-line">新碟上架</a>
			</div>
		</div>
		
		<div id="content">
			<div id="co-top">
				<div id="navigate-left">
					<a href="#">&lt;</a>
				</div>
				<div id="mid-con">
					<!-- 轮播图 -->
					<div id="animation">
						<div class="img-wrap">
							<ul>
								<li><img class="take-turns" src="../img/01.jpg" /></li>
								<li><img class="take-turns" src="../img/02.jpg" /></li>
								<li><img class="take-turns" src="../img/03.jpg" /></li>
								<li><img class="take-turns" src="../img/04.jpg" /></li>
								<li><img class="take-turns" src="../img/05.jpg" /></li>
								<li><img class="take-turns" src="../img/01.jpg" /></li>
								<li><img class="take-turns" src="../img/02.jpg" /></li>
								<li><img class="take-turns" src="../img/03.jpg" /></li>
								<li><img class="take-turns" src="../img/04.jpg" /></li>
								<li><img class="take-turns" src="../img/05.jpg" /></li>
							</ul>
						</div>
						<div class="index-wrap">
							<ul>
								<li class="btn"></li>
								<li class="btn"></li>
								<li class="btn"></li>
								<li class="btn"></li>
								<li class="btn"></li>
								<li class="btn"></li>
								<li class="btn"></li>
								<li class="btn"></li>
								<li class="btn"></li>
								<li class="btn"></li>
							</ul>
						</div>
					</div>
					<div id="download">
						<img src="../netease_imgs/download.jpg" />
					</div>	
				</div>
				<div id="navigate-right">
					<a href="">&gt;</a>
				</div>
			</div>
			<div id="co-bot">
				<div id="main-left">
					<!-- 热门推荐 -->
					<div id="hot-rec" class="conten-info">
						<!-- 列表 -->
						<div>
							<span></span>
							<span>热门推荐</span>
							<ul>
								<li><a href="#">华语</a></li>
								<li><a href="#">流行</a></li>
								<li><a href="#">摇滚</a></li>
								<li><a href="#">民谣</a></li>
								<li><a href="#">电子</a></li>
							</ul>
							<span><a href="#">更多</a></span>
							<hr class="com-hr"/>
						</div>
					</div>
					<!-- 新碟上架 -->
					<!-- 榜单 -->
				</div>
				<div id="main-right">
					<!-- 用户登录 -->
					<div id="user-login">
						<p style="text-align: center;">登录网易云音乐，可以享受无限收藏的乐趣，并且无限同步到手机</p>
						<input type="button" value="用户登录" />
					</div>
					<!-- 入驻歌手 -->
					<!-- 热门主播 -->
				</div>
			</div>
		</div>
		
		<div id="bottom">
			底部
		</div>
	</body>
</html>
